<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>收货地址</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		
		<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html,
			body {
				background-color: #f6f6f6;min-height: 100vh;font-size: 0.373rem;
			}
			ul, ol { list-style:none; } 
			body input[type='text'],ul,li{padding: 0;margin: 0;}
			.clear{clear:both;height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;}
			/*顶部*/
			.my_top {
				height: 4.57rem;background: url(../images/my_bg.png) no-repeat;background-size: 100% 100%;
			}
			.mui-bar-nav{display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #e5e5e5;}
			.mui-bar-nav .mui_my_jia{height: 0.56rem;width: 0.56rem;}
			/*地址列表*/
			.ads_li_top{display: flex;justify-content: space-between;line-height: 0.6rem;height: 0.6rem;}
			.my_ads_li{background: #fff;margin-bottom: 0.266rem;padding: 0.253rem 0.4rem;}
			.ads_buttom{display: flex;align-items: center;justify-content: center;}
			.my_ads_content{background: #f6f4f1}
			.ads_buttom input[type=radio]{position: initial;height: 0.6rem;display: inline;float: left;}
			.ads_li_middle{border-bottom: 1px solid #e5e5e5;height: 1.01rem; font-size: 0.346rem;color: #000;}
			.ads_li_buttom{display: flex;justify-content: space-between;align-content: center;}
			.ads_bian{display: flex;align-items: center;justify-content: center;}
			.ads_bian img{width: 0.44rem;height: 0.44rem;margin-right: 0.146rem;}
			.ads_bian_bj{margin-right: 0.36rem;}
			.ads_bian_bj,.ads_bian_shan{align-content: center;display: flex;align-items: center;}
			.ads_li_top h3{font-size: 0.426rem;font-weight: normal;margin: 0;height: 0.6rem;line-height: 0.6rem;}
			.ads_li_top span{font-size: 0.373rem;}
			.ads_buttom label{position: initial;padding: 0;line-height: normal;}
			.mui-radio input[type=radio]:checked:before{content: '\e472';background: #007aff;color: #FFFFFF;border-radius: 50%;font-size: 0.5rem;}
			.mui-table-view-radio .mui-table-view-cell .mui-navigate-right:before{
				border: 1px solid #3D3D3D;opacity: .3;
			}
			.mui-radio input[type=radio]:before{content: '\e411';font-size: 0.5rem;}
		</style>
	</head>
	<body>
		<!--顶部-->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">收货地址</h1>
			<a class="mui-control-item mui_my_jia" href="my_newads.html"><img class="mui_my_jia" src="../images/my_adsjia.png"/></a>
		</header>
		<div class="my_content mui-content" id="app">			
 			<ul class="mui-table-view mui-table-view-radio my_ads_content">
 				<li class="my_ads_li" v-for="(item,i) in city">
 					<div class="ads_li_top">
 						<h3>{{item.name}}</h3>
 						<span>{{item.phone}}</span>
 					</div>
 					<p class="ads_li_middle">{{item.city}}</p>
 					<div class="ads_li_buttom">
 						<div class="ads_buttom mui-input-row mui-radio" @click="radio(i)">
 							<label :style="item.style"><input name="radio1" type="radio" value="1" v-if="item.chc=='checked'" checked="checked">
 							<input name="radio1" type="radio" value="1" v-if="item.chc==''">默认地址1</label>
 						</div>
 						<div class="ads_bian">
 							<div class="ads_bian_bj">
 								<img src="../images/ads_bj.png" />
 								<span><a href="my_adsbj.html">编辑</a></span>
 							</div>
 							<div class="ads_bian_shan">
 								<img src="../images/ads_sc.png" />
 								<span>删除</span>
 							</div>
 						</div>
 					</div>
 				</li>
 			</ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		 <script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		var app = new Vue({
			el: '#app',
			data: {
				city:[
					{name:'光电智慧',city:'陕西省西安市未央区风景御园19栋706',phone:'12548563214',chc:'',style:''},
					{name:'光电智慧',city:'陕西省西安市未央区风景御园19栋706',phone:'12548563214',chc:'checked',style:{color:'#007aff'}},
					{name:'光电智慧',city:'陕西省西安市未央区风景御园19栋706',phone:'12548563214',chc:'',style:''},
				],
			},
			methods:{
				radio:function(e){
					var data = app.city
					for (var i = 0; i < data.length; i++) {
						data[i].style=''
					}
					data[e].style={color:'#007aff'}
					console.log(data)
				}
			}
		})				
	</script>
	</body>

</html>